<template>
	<view class="WorkItem">
		 <!-- url="/pages/classlist/classlist"/ -->
		<view class="box" @click="toPreviewPage('work',props.WorkObj.id)" >
			<image class="pic" :src="WorkObj.image_url" mode="aspectFill"></image>
			<view class="mask"> 作品名： {{WorkObj.work_name}}  </view>
			<view class="tab"> {{WorkObj.work_name}}  </view>
		</view>
				
<!-- 		<navigator :url="'/pages/classlist/classlist?id=' + item._id + '&name=' + item.name " class="box" v-if="!isMore">
			{{item._id}}
			<image class="pic" :src="item.picurl" mode="aspectFill"></image>
			<view class="mask"> {{item.name}} </view>
			<view class="tab"> i am tab {{timeDifference(item.updateTime)}}前更新 </view>
		</navigator> -->
	</view>
</template>

<script setup>
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app";
	
	const props = defineProps( {
		WorkObj:{
			type: Object,
			default: {}
		}
	} );
	
	const toPreviewPage=(tableName, objId)=>{
		const url = `/pages/preview/preview?tablename=${tableName}&id=${objId}`
		uni.navigateTo({
			url: url
		})
		console.log("to previewpage: url is:", url);
	}
	
	onLoad(()=>{
		// console.log("qwqqwq props of this work-item: "); console.log(props);
		// console.log("qwqqwq id is: ", props.WorkObj.id);
	})
	

</script>

<style lang="scss">
	.WorkItem{
		.box{
			border-radius: 10rpx;
			overflow: hidden; 
			height: 500rpx;
			position: relative;
			.pic{
				width: 100%;
				height: 100%;
			}
			.mask{
				// border: 1px solid red;
				width: 100%;
				height: 70rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.2);
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				backdrop-filter: blur(25rpx); //磨砂玻璃
				font-weight: 600;
				font-size: 30rpx;
			}
			.tab{
				// border: 1px solid red;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(250,129,90,0.7);
				backdrop-filter: blur(25rpx);
				color: #fff;
				font-size: 22rpx;
				padding: 6rpx 15rpx;
				border-radius: 0 0 6rpx 0;
				transform: scale(0.8);
				transform-origin: left top;
			}
		}
		
		// 这两个类同时存在的时候的样式
		.box.more{
			.mask{
				width: 100%;
				height: 100%;
				// flex-direction: column;
			}
			.maskText{
				font-size: 30rpx;
			}
		}
	}

</style>